<!doctype html>
<#assign ctx=request.contextPath>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<#include "header.html"/>
<#import "/macros/header_macro.html" as muyaxuan_header>
<link rel="stylesheet" type="text/css" href="${ctx}/css/log_in.css">
<script type="text/javascript">
     $(function(){
            $("#codeImg").click(function(){                
                 $(this).attr("src","${ctx}/verify?random="+Math.random());
            });       
            $("#entry").click(function(){			 
				var isSubmit = true;
				/** 做表单输入校验 */
				var userId = $("#userId");
				var password = $("#password");
				var code = $("#code");
				if ($.trim(userId.val()) == ""){
				    alert("* 用户名不能空！");
					isSubmit = false;
					userId.focus();// 调用文本框获取焦点方法
				}else if (!/^\w{5,20}$/.test($.trim(userId.val()))){
				    alert("* 用户名格式不正确！");				
					isSubmit = false;
					userId.focus();// 调用文本框获取焦点方法
				}else if ($.trim(password.val()) == ""){
				    alert("* 密码不能为空！");
					isSubmit = false;
					password.focus();// 调用文本框获取焦点方法
				}else if (!/^\w{6,20}$/.test($.trim(password.val()))){
				    alert("* 密码格式不正确！");
					isSubmit = false;
					password.focus();// 调用文本框获取焦点方法
				}else if ($.trim(code.val()) == ""){
				    alert("* 验证码不能为空！");
					isSubmit = false;
					code.focus();// 调用文本框获取焦点方法
				}else if (!/^[a-zA-Z0-9]{4}$/.test($.trim(code.val()))){
				    alert("* 验证码格式不正确！");
					isSubmit = false;
					code.focus();// 调用文本框获取焦点方法
				} 
				
				if(isSubmit){
				   var params=$("#loginForm").serialize();    
				   var url="${ctx}/customer/loginAjax";
				   $.post(url,params,function(data){
				        if(data.status==0){
				               window.location="${ctx}/customer/home";
				        }else{				        
				              alert(data.tip);
				        }
				   },"json");			   
				}
            });    
     });
</script>

</head>
<!--[if lt IE 9]>
<script src="js/IE9.js"></script>
<![endif]-->
<body>
<!--头部开始-->
<!--头部导航栏-->
  <@muyaxuan_header.header ctx="${ctx}"/>
<!--头部结尾-->
<!--中间内容开始-->
<div class="midder">
    <div class="chart">
      <a href="product_details.html"><img src="${ctx}/images/log_in1.png"/></a>
      <a href="order.html"><input type="button" name="button" value="￥599 立即抢购"/></a>
    </div>
    <div class="entry">
      <div class="entry_a">
        <form id="loginForm"  method="post">
        <p><a href="member.html">木雅轩会员</a>
        <a href="${ctx}/customer/showRegister">新用户注册</a></p>
        <input type="text" id="userId" name="userId"  placeholder="用户名/邮箱" />
        <input type="password" id="password" name="password"  placeholder="密码"/> 
        <input type="text" id="code" name="code"  placeholder="验证码"/><img id="codeImg"  src="${ctx}/verify" style="height:43px; width:100px; margin-bottom:-22px; margin-left:28px; cursor:pointer;"><br/>
        <input type="checkbox" id="remember_password" name="remember_password"  value="remember_password"/><label for="remember_password">记住密码</label> |
        <a class="forget_password" href="#">记住密码？</a>
        <input id="entry" type="button" name="submit" value="登  录"/>        
        </form>
        <p class="no_register">无需注册，选择以下方式快速登陆</p>
        <a href="${ctx}/customer/qq">QQ</a> |
        <a href="#">微信</a>
      </div>
    </div>
</div>
<!--中间内容结尾-->

<!--尾部内容-->
<div class="bfoot">
   <p>
    <a href="#">免责条款</a>
    <a href="#">隐身保护</a>
    <a href="#">招聘英才</a>
    <a href="#">联系我们</a>
    <a href="#">公司简介</a>
    <a href="#">批发方案</a>
    <a href="#">配送方式</a>
    <a href="#">留言板</a>
   </p>
  <h1>Copyright © 2003-2016 muyaxuan.net, All Rights Reserved</h1>
 </div>
</body>
</html>